<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: head"></head>
<body class="layui-fluid">
<div class="layui-row layui-col-space8">
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">数据窗口</div>
            <div class="layui-card-body">
                <div class="layui-form" lay-filter="collectForm" style="padding: 10px;">
                    <div th:insert="./module/common-form"></div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <hr class="layui-bg-black">
                        </div>
                    </div>
                    <div class="layui-collapse" lay-accordion>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">发送json数据</h2>
                            <div class="layui-colla-content">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">待发送数据</label>
                                    <div class="layui-input-block">
                                        <textarea name="jsonData" placeholder="请输入待发送数据(json格式)" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">手动添加</h2>
                            <div class="layui-colla-content layui-show">
                                <div id="appendTemp">

                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn layui-btn-sm layui-btn-normal" id="addRow">
                                            <i class="layui-icon">&#xe654;</i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        &nbsp;
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="sendData">立即提交(json数据跟手动添加的只能有一个，否则以json数据为准)</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">日志内容
                <i class="layui-icon layui-icon-delete" id="deleteLogs"></i>
            </div>
            <div class="layui-card-body" style="overflow: auto;height: 500px;" id="logScroll">
                <div id="logAppend" class="layui-code" style="word-wrap:break-word"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="rowTemp">
    <div class="layui-form-item">
        <label class="layui-form-label">{{d.key}}</label>
        <div class="layui-input-inline">
            <input type="text" name="{{d.key}}" required  lay-verify="required" placeholder="value" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button class="layui-btn layui-btn-xs layui-btn-danger deleteInputItem">
                <i class="layui-icon">&#xe640;</i>
            </button>
        </div>
    </div>
</script>
<script type="text/html" id="appIdTemp">
    <div class="layui-col-md3">
        <div class="layui-form-item">
            <label class="layui-form-label">appId</label>
            <div class="layui-input-block">
                <input type="text" name="appId" value="bs" placeholder="请输入appId" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-form-item">
            <label class="layui-form-label">appKey</label>
            <div class="layui-input-block">
                <input type="text" name="appKey" value="999" placeholder="请输入appKey" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tokenTemp">
    <div class="layui-col-md6">
        <div class="layui-form-item">
            <label class="layui-form-label">token</label>
            <div class="layui-input-block">
                <input type="text" name="token" value="BS_NONTAX_TOKEN" placeholder="请输入token" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
</script>
<script>
    layui.use(['epay', 'layer','laytpl','code'], function () {
        var form = layui.form;
        var dhh = layui.dhh;
        var epay = layui.epay;
        var layer = layui.layer;
        var $ = layui.$;
        var laytpl = layui.laytpl;
        form.on('submit(sendData)', function (data) {
            dhh.post('/common/sendCommon', data.field, function (response) {
                $("#logAppend").append(response.msg+"<br><br>");
                layer.msg(response.msg);
            });
            return false; //阻止表单跳转。
        });
        form.on('switch(stdClient)', function(data){
            var cheched = data.elem.checked;
            var html = cheched ? $("#appIdTemp").html() : $("#tokenTemp").html();
            $("#appIdBlock").html(html);
        });
        $("#randomCollectForm").click(function () {
            epay.randomCollectForm('collectForm');
        });
        $("#addRow").click(function () {
            layer.prompt({title:'输入key'},function(value, index, elem){
                var formItemHtml = laytpl($("#rowTemp").html()).render({key:value});
                $("#appendTemp").append(formItemHtml);
                $(".deleteInputItem").click(function () {
                    $(this).parent().parent().remove();
                });
                layer.close(index);
            });
        });
    })
</script>
</html>